/**
*@description 用户画像》自然人属性》基本信息
*@author yhw
*/
import React, { Component, PropTypes } from 'react';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import MainLayout from '../components/MainLayout/MainLayout';
import Area from '../components/Persons/Area';
import PieSimple from '../components/Persons/PieSimple';
import BarSimple from '../components/Persons/BarSimple';
import TableList from '../components/TableList';
import {Card, Icon, Tooltip, Row, Col} from 'antd';
import toExcel from '../utils/toExcel';
import downImg from '../utils/downImg';

const sexTips = (<div>性别&nbsp;
  <Tooltip placement="right" title="性别是指用户性别标签的特征。对比数据是CNNIC的全国网民数据">
          <Icon type="question-circle-o" />
  </Tooltip></div>),
ageTips = (<div>年龄&nbsp;
  <Tooltip placement="right" title="年龄是指用户年龄标签的特征。">
          <Icon type="question-circle-o" />
  </Tooltip></div>),
areaTips = (<div>地域特征&nbsp;
  <Tooltip placement="right" title={(<span>地域特征是指用户地域标签的在省份图表上所体现出的地域特征，<br />对比数据是CNNIC的全国网民数据</span>)}>
          <Icon type="question-circle-o" />
  </Tooltip></div>),
cityTips = (<div>城市&nbsp;
  <Tooltip placement="right" title="城市是指用户城市标签的在省份图表上所体现出的地域特征。">
          <Icon type="question-circle-o" />
  </Tooltip></div>),
xingzuoTips = (<div>星座&nbsp;
  <Tooltip placement="right" title="星座是指用户星座标签的特征。">
          <Icon type="question-circle-o" />
  </Tooltip></div>);

class PersonsInfo extends Component {
  constructor(props) {
      super(props);
  }
  // 获取数据
  fetchData(type, search){
    this.props.dispatch({
            type: type,
            payload: search
    })
  };
  initData(){
    this.fetchData('PersonsInfo/sexQuery','');
    this.fetchData('PersonsInfo/ageQuery','');
    this.fetchData('PersonsInfo/areaQuery','');
    this.fetchData('PersonsInfo/cityQuery','');
    this.fetchData('PersonsInfo/xingzuoQuery','');
  };
  componentWillMount() {
    this.initData();
  };
  exExcel(){
      let title=[], value = [];
      this.props.PersonsInfo.areaData.map(function(item, index){
            value.push([item.province, item.count, item.countPct, item.nationalPct]);
        });
        toExcel(['省份','人数','占比','全国网民占比'], "地域特征", value);
  };
  render(){
  return (
    <MainLayout>
        <Row gutter={16} style={{marginTop:"29px"}}>
              <Col className="gutter-row" span={16}>
              <div className="gutter-box">
                    <Row gutter={16}>
                        <Col className="gutter-row" span={12}>
                            <div className="gutter-box">
                              <Card title={sexTips} style={{height:396}}>
                                    <PieSimple data={this.props.PersonsInfo.sexData} loading={this.props.PersonsInfo.sexLoading} seriesName="性别" width={"100%"} height={300} />
                              </Card>
                            </div>
                        </Col>
                        <Col className="gutter-row" span={12}>
                              <div className="gutter-box">
                                  <Card title={ageTips} style={{height:396}}>
                                        <BarSimple seriesName="年龄" data={this.props.PersonsInfo.ageData} loading={this.props.PersonsInfo.ageLoading} width={"100%"} height={300} />
                                  </Card>
                            </div>
                        </Col>
                    </Row>
                    <Card title={areaTips}>
                    <div className="downloads">
                            <span className="dimg" onClick={downImg.bind(this,"areaList","地域特征")}></span>
                            <span className="desl" onClick={this.exExcel.bind(this)}></span>
                      </div>
                        <Row id="areaList" style={{marginTop:15}}>
                          <Col span={13}><Area data={this.props.PersonsInfo.areaData} width={"100%"} height={300} /></Col>
                          <Col span={11}>
                                  <Row gutter={10} style={{fontSize:"14px",color:"#fff"}}>
                                  <Col className="gutter-row" span={6}>
                                    <div className="gutter-box">省份</div>
                                  </Col>
                                  <Col className="gutter-row" span={5}>
                                    <div className="gutter-box">人数</div>
                                  </Col>
                                  <Col className="gutter-row" span={5}>
                                    <div className="gutter-box">占比</div>
                                  </Col>
                                  <Col className="gutter-row" span={8}>
                                    <div className="gutter-box">全国网民占比</div>
                                  </Col>
                            </Row>
                            {this.props.PersonsInfo.areaData.length>0?this.props.PersonsInfo.areaData.map(function(item, index){
                              return index<10?(<Row key={"area"+index} gutter={10} style={{color:"#ddd",lineHeight:"29px"}}>
                                            <Col className="gutter-row" span={6}>
                                              <div className="gutter-box">{item.province}</div>
                                            </Col>
                                            <Col className="gutter-row" span={5}>
                                              <div className="gutter-box">{parseInt(item.count).formatMoney()}</div>
                                            </Col>
                                            <Col className="gutter-row" span={5}>
                                              <div className="gutter-box">{item.countPct}%</div>
                                            </Col>
                                            <Col className="gutter-row" span={8}>
                                              <div className="gutter-box">{item.nationalPct}%</div>
                                            </Col>
                                      </Row>):""
                                 }):(<div className="emptyData">暂无数据</div>)}
                              </Col>
                          </Row>
                        </Card>
                        <Card title={cityTips}>
                              <BarSimple seriesName="城市" data={this.props.PersonsInfo.cityData} loading={this.props.PersonsInfo.cityLoading} width={"100%"} height={300} />
                        </Card>
                        <Card title={xingzuoTips}>
                              <BarSimple seriesName="星座" data={this.props.PersonsInfo.xingzuoData} loading={this.props.PersonsInfo.xingzuoLoading} width={"100%"} height={300} />
                        </Card>
              </div>
              </Col>
              <Col className="gutter-row" span={8}><div className="gutter-box"><TableList pageSize={18} /></div></Col>
        </Row>
    </MainLayout>
  );
  }
};

PersonsInfo.propTypes = {
};

function mapStateToProps({ PersonsInfo }) {
  return {
    PersonsInfo: {...PersonsInfo},
  };
}

export default connect(mapStateToProps)(PersonsInfo);